<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>5.天气案例_监视简写形式</title>
		<style>
			img{
				width: 100px;
			}
		</style>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="demo">
			<h1>今天天气很{{info}}</h1>
			<button @click="changeWeather">切换天气</button> <br>
			<img :src="url" alt="">
		</div>
	</body>

	<script type="text/javascript">
		//阻止 vue 在启动时生成生产提示。
		Vue.config.productionTip = false

		const vm = new Vue({
			el:'#demo',
			data:{
				isHot:true,
				url:'./imgs/re.jpg'
			},
			computed:{
				info(){
					return this.isHot ? '炎热' : '凉爽'
				}
			},
			methods:{
				changeWeather(){
					this.isHot = !this.isHot
				}
			},
			watch:{
				//标准写法
				/* isHot:{
					handler(value){
						if(value) this.url = './imgs/re.jpg'
						else  this.url = './imgs/cool.jpg'
					}
				} */
				//简写
				isHot(value){
					if(value) this.url = './imgs/re.jpg'
					else  this.url = './imgs/cool.jpg'
				}
			}
		})
		console.log(vm)
		
	</script>
</html>